<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body {
            margin: 0;
        }
        div {
            position: absolute;
            border: 2px solid #000; 
            box-sizing: border-box;
            opacity: 0.7;
        }
        .circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- <div style="width:100px;height:100px;left:100px;top:50px;" class=""></div> -->

    <script>
        // 要求:
            // 父类 Draw
                // 属性: x y 
                // 方法: getRandom

            // 子类:
                // 矩形
                    // 属性: w  h
                    // 方法: drawRect  制作矩形


                // 圆
                    // 属性: size
                    // 方法: drawCircle  制作圆


        // 编码:
        // 父类 Draw
            // 属性: x y 
            // 方法: getRandom
        function Draw() {
            // 添加属性
            this.x = 0;
            this.y = 0;
        }
        // 添加方法
        Draw.prototype.getRandom = function(min,max) {
            // 定义变量记录最小值和最大值
            var min = min || 50;
            var max = max || 201;
            // 指定范围的随机数
            // return Math.floor(Math.random() * 151 + 50);// [50-200]
            return Math.floor(Math.random() * (max-min) + min);// [min-max]
        }
        // 创建父类的实例
        var d = new Draw();


        // 子类: Rect
            // 属性: w  h
            // 方法: drawRect  制作矩形
        
        // 构造函数
        function Rect(){
            // 改变this指向
            Draw.apply(this);
            // 添加子类特有的属性
            this.w = 0;
            this.h = 0;
        }
        // 设置子类的原型
        Rect.prototype = {
            constructor: Rect,
            getRandom: d.getRandom
        }
        // 添加当前子类的方法
        Rect.prototype.drawRect = function(){
            // x, y, w, h 
            // 当前方法被调用时重新赋值
            this.x = this.getRandom(0,1000);
            this.y = this.getRandom(0,700);
            this.w = this.getRandom();
            this.h = this.getRandom();
            // console.log(this);
            // 字符串拼接
            var str = '<div style="width:'+this.w+'px;height:'+this.h+'px;left:'+this.x+'px;top:'+this.y+'px;"></div>';
            // 渲染字符串
            document.write(str);

        }
        // 符合构造函数添加属性,原型添加方法的思想

        // 循环50次
        // for(var i = 0 ; i < 50 ; i ++){
        //     new Rect().drawRect()
        // }


          // 子类: Circle
            // 属性: size
            // 方法: drawCircle  制作圆
        
        // 构造函数
        function Circle(){
            // 改变this指向
            Draw.apply(this);
            // 添加子类特有的属性
            this.size = 0;
        }
        // 设置子类的原型
        // var obj = {key : value } ;// value 可以是任意数据类型
        Circle.prototype = {
            constructor: Circle,
            getRandom: d.getRandom
        }
        // 添加当前子类的方法
        Circle.prototype.drawCircle = function(){
            // x, y, w, h 
            // 当前方法被调用时重新赋值(可视区的尺寸:window.innerWidth/window.innerHeight)
            this.x = this.getRandom(0,window.innerWidth);
            this.y = this.getRandom(0,window.innerHeight);
            this.size = this.getRandom();
            // console.log(this);
            // 字符串拼接
            var str = '<div class="circle" style="width:'+this.size+'px;height:'+this.size+'px;left:'+this.x+'px;top:'+this.y+'px;"></div>';
            // 渲染字符串
            document.write(str);
        }
        

        // 制作50个圆
        for(var i = 0 ; i < 50 ; i ++){
            new Circle().drawCircle()
        }
    </script>
</body>
</html>